<template>
	<zui-box>

		<!-- 头部导航 -->
		<zui-navbar :have_back="false" title='金豆兑换专区'></zui-navbar>
       
		<u-gap height="30rpx"></u-gap>

		<!-- 页面主体 -->
		<mescroll-body :height="mescroll_height +'px'" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :down="downOption" :up="upOption">
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index" @click="go_to(item)">
					<image :src="item.goods_thumb" class="image"></image>
					<view class="content">
						<view class="title ">{{item.goods_name}}</view>
						<view class="small_text ">¥{{item.goods_price}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>

	</zui-box>
</template>
<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin, uni.$u.mpMixin, uni.$u.mixin],
		data() {
			return {
				cat_id: '', //商品分类id
				goods_name: '', //商品搜索名称
				module_id: '', //商品商品id
				the_title: '商品列表',
				list: [],
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				},
				mescroll_height:''

			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					console.log('一', res.windowHeight); //可使用窗口高度
					that.mescroll_height = res.windowHeight - that.$u.getPx(uni.$u.props.navbar.height) - that.$u
						.sys().statusBarHeight - 80

					console.log('二', that.mescroll_height)
				}
			})
		},
		onLoad(e) {
			console.log("跳转",e)
			this.cat_id = e.cat_id || '';
			this.the_title = e.name || '';
			this.goods_name = e.goods_name || '';
			this.module_id = e.module_id || '';
			// 获取到参数后执行下拉刷新
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			})
		},
		methods: {
			go_to(item) {
				uni.navigateTo({
					url: '/pages/integral/good_item?id=' + item.id
				});
			},

			// 
			//下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {

				let obj = {}

				// if (this.cat_id) {
				// 	obj.cat_id = this.cat_id
				// }
				// if (this.module_id) {
				// 	obj.module_id = this.module_id
				// }
				console.log("page"+page.num)
				if (this.cat_id) {
					obj.cat_id = this.cat_id
				}
				if (this.module_id) {
					obj.module_id = this.module_id
				}
				
				if (page.num) {
					obj.page = page.num
				}
				


				uni.$u.http
					.get('/app/integral/list', {
						params:obj,
						custom: {
							auth: true,
							toast: false,
							catch: false,
						},
					}, )
					.then(res => {
						console.log('返回的数据', res.list);
						this.mescroll.endSuccess(res.list.length);
						//设置列表数据
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.list); //追加新数据

					})
					.catch(res => {
						this.mescroll.endErr();
					});
			},
		}
	}
</script>
<style lang="scss" scoped>
	/* //空数据 */
	/deep/.mescroll-empty {
		box-sizing: border-box;
		width: 100%;
		padding: 400rpx 50rpx;
		text-align: center;
	}

	//自定义顶部栏
	.navbar {
		font-size: 30rpx;

		.title {
			color: #fff;

		}

		/deep/.u-icon {
			padding: 10rpx;
			border-radius: 50%;
			// background:rgba(35 ,159 ,229,0.85);
		}
	}

	//顶部栏
	.grace-header-content {
		color: #fff;
	}

	.grace-search-tags {
		padding: 10rpx 0;
	}

	.grace-search-tags-items {
		padding: 5rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		border-width: 1px;
		border-style: solid;
		border-color: #F1F1F1;
		color: #A5A7B2;
		font-size: 26rpx;
	}


	//轮播图
	.grace-swiper {
		height: 300rpx;
	}

	.grace-swiper-item {
		height: 280rpx;
	}

	.swiper-image {
		margin: 0 auto;
		width: 670rpx;
		height: 280rpx;
		border-radius: 20rpx;


		display: block;

	}

	.swiper3 {
		height: 360rpx !important;
	}


	// 九宫格
	.grace-grids {
		padding-left: 25rpx;
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
	}


	/* 演示了如何修改组件宽度 */
	.five>.grace-grids-items {
		width: 140rpx;
	}

	.grids-border-wrap {
		border-top: 1px solid #F1F2F3;
		border-left: 1px solid #F1F2F3;
	}

	.grids-border-item {
		border-bottom: 1px solid #F1F2F3;
		border-right: 1px solid #F1F2F3;
	}

	.grace-grids-text {
		color: #F1B863;
	}


	// 图标分类

	.list {
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			box-sizing: border-box;
			padding: 30rpx;
			width: 322rpx;
			font-size: 28rpx;
			border-radius: 5px;
			position: relative;
			margin: 10rpx 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #fff;
		}

		.image {
			width: 260rpx;
			border-radius: 8rpx;
			height: 260rpx;
			flex-shrink: 0;
			margin-bottom: 30rpx;

		}

		.content {
			text-align: center;

			.title {
				color: #333333;
				line-height: 60rpx;
				font-size: 28rpx;
			}

			.small_text {
				color: #E63A2A;
				line-height: 60rpx;
				font-size: 26rpx;
			}
		}


	}
</style>
